<template>
	<view style="height: 100%;">
		<view class="block-title" style="display: flex;padding: 10px 0;">
			<view @click="selectLabel(item)" :class="{active: selected_label == item.text}" v-for="(item,index) in labels" style="flex: 1;text-align: center;">{{item.text}}</view>
		</view>
		<view style="background-color: #fff;padding: 10px;margin: 10px;border-radius: 5px;" v-for="(item,index) in data">
			<view style="border-bottom: 1px solid #eee;padding-bottom: 10px;font-weight: bold;">
				<uni-row style="display: flex;">
				    <uni-col>
						订单编号：
				    </uni-col>
					<uni-col style="margin-left: 150rpx; position: absolute;">
						{{item.status_order}}
						<!-- 12235688565886 -->
					</uni-col>
				    <uni-col style="text-align: right;">
				        <view style="color: #007AFF; margin-left: 130rpx;">{{item.status_label}}</view>
				    </uni-col>
				</uni-row>
				
				
			</view>
			<!-- <navigator :url="detail(item)"> -->
				<view @click="detail(item)" style="padding: 10px 0;">
					<uni-row>
					    <uni-col :span="12">
							<view>{{item.title}}</view>
					    </uni-col>
					    <uni-col :span="12">
							<view style="text-align: right;">
								<view style="margin-bottom: 15px;font-size: 14px;">定金￥{{item.front_price}}</view>
								<view style="margin-bottom: 15px;font-size: 14px;">费用￥{{item.final_price}}</view>
								<view style="font-size: 14px; color: red;">合计￥{{item.total_price}}</view>
							</view>
					        
					    </uni-col>
					</uni-row>
				</view>
			<!-- </navigator> -->
			
			<view v-if="item.status == 1" style="border-top: 1px solid #eee;padding-top: 10px; display: flex;">
				<view style="text-align: right; flex: 15;">
					<button style="background-color: #2979FF; width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" @click="showmo()" size="mini">联系客服</button>
				</view>
				<view style="text-align: right; flex: 6;">
					<button style="background-color: #2979FF; width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" size="mini" @click="payFrontPrice(item)">支付定金</button>
				</view>
			</view>
			
			<view v-if="item.status == 10 " style="border-top: 1px solid #eee;padding-top: 10px;">
				<uni-row>
				    <!-- <uni-col :span="12">
						<text v-if="item.worker_id != 0">师傅名称：{{item.worker_name}}</text>
						<text v-else>师傅名称：未分配师傅</text>
				    </uni-col> -->
				    <uni-col style="display: flex;">
						<view style="text-align: right; flex: 15;">
							<button style="background-color: #2979FF; width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" @click="showmo()" size="mini">联系客服</button>
						</view>
				        <view v-if="item.worker_id != 0" style="text-align: right; flex: 6;">
							<button style="background-color: #2979FF; width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" size="mini" @click="call()">联系师傅</button>
						</view>
				    </uni-col>
				</uni-row>
			</view>
			
			 <view v-if=" item.status == 20" style="border-top: 1px solid #eee;padding-top: 10px;">
				<uni-row>
				   <!-- <uni-col :span="12">
						<text v-if="item.worker_id != 0">师傅名称：{{item.worker_name}}</text>
						<text v-else>师傅名称：未分配师傅</text>
				    </uni-col> -->
				    <uni-col style="display: flex;">
				        <view style="text-align: right; flex: 15;">
				        	<button style="background-color: #2979FF;  width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" @click="showmo()" size="mini">联系客服</button>
				        </view>
				        <view style="text-align: right; flex: 6;">
				        	<button style="background-color: #2979FF; width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" size="mini">确定报价</button>
				        </view>
				    </uni-col>
				</uni-row>
			</view>
			
			<view v-if="item.status == 30" style="border-top: 1px solid #eee;padding-top: 10px;">
				<uni-row>
				    <!-- <uni-col :span="6">
						<text v-if="item.worker_id != 0">{{item.worker_name}}</text>
						<text v-else>未分配师傅</text>
				    </uni-col> -->
				    <uni-col style="display: flex;">
				        <view style="text-align: right; flex: 15;">
				        	<button style="background-color: #2979FF;  width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" @click="showmo()" size="mini">联系客服</button>
				        </view>
				        <view style="text-align: right; flex: 6;">
				        	<button style="background-color: #2979FF;  width: 85px; height: 25px; font-size: 12px; border-radius: 5px; color: #FFFFFF;" size="mini" @click="payFrontPrice(item)">支付尾款</button>
				        </view>
				    </uni-col>
				</uni-row>
			</view>
		</view>
		
		<uni-popup ref="popup" style="width: 100%;" type="center" :animation="false">
			<view style="background-color: #fff;width: 100%;">
				<radio-group @change="popChange" style="width: 300px;padding: 20px;">
					<label class="uni-list-cell uni-list-cell-pd" style="display: flex;padding-bottom: 10px;">
						<view style="flex: 1;">
							<image style="width: 30px;height: 30px;" src="../../static/zhifubao.jpg"></image>
						</view>
						<view style="flex: 6;">
							<text style="line-height: 30px;">支付宝</text>
						</view>
						<view style="flex: 1;">
							<view style="text-align: right;">
								<radio style="transform:scale(0.8);" value="20" />
							</view>
						</view>
					</label>
					<!-- <label class="uni-list-cell uni-list-cell-pd" style="display: flex;">
						<view style="flex: 1;">
							<image style="width: 30px;height: 30px;" src="../../static/WeChat.png"></image>
						</view>
						<view style="flex: 6;">
							<text style="line-height: 30px;">微信</text>
						</view>
						<view style="flex: 1;">
							<view style="text-align: right;">
								<radio style="transform:scale(0.8);" value="10" />
							</view>
						</view>
					</label> -->
				</radio-group>
				<view style="padding: 0 10px 10px 10px;">
					<button type="warn" @click="confirmPay">确认支付￥{{pay_price}}</button>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labels: [
					{text: '全部', status: 0},
					{text: '待付款', status: 1},
					{text: '待上门', status: 10},
					{text: '待服务', status: 20},
					{text: '已完成', status: 30},
				],
				selected_label: '全部',
				data: [],
				data1: [],
				
				sel_pay_type: 0,
				sel_order: {},
				pay_price: 0,
			}
		},
		onLoad(opts) {
			
		},
		onShow() {
			
			this.getList();
		},
		methods: {
			popChange(e) {
				this.sel_pay_type = e.detail.value;
			},
			confirmPay() {
				console.log(this.sel_pay_type)
				if (this.sel_pay_type == 0) {
					return;
				}
				this.$api.postPayFrontPrice({
					code: this.sel_order.code,
				}).then(res => {
					if (res.data.code_url) {
						location.href = res.data.code_url
					}
				})
			},
			selectLabel(item) {
				this.selected_label = item.text
				if (item.status == 0) {
					this.data = this.data1;
					return;
				}
				let that = this;
				this.data = [];
				this.data1.forEach(function(item1, i) {
					if (item1.status == item.status) {
						that.data.push(item1);
					}
				})
				
			},
			getList() {
				let that = this;
				this.$api.getSeivceOrderList({
					uid: this.$common.getUser(),
				}).then(res => {
					if (res.meta.code == '000') {
						that.data = res.data;
						that.data1 = that.data;
						
						let tab = uni.getStorageSync('tmp_order_tab');
						if (tab) {
							that.labels.forEach((item, i) => {
								if (item.status == tab) {
									that.selected_label = item.text
									that.selectLabel(item);
								}
							});
						}
						uni.removeStorageSync('tmp_order_tab')
						
					}
				})
			},
			detail(item) {
				uni.setStorageSync('tmp_order_id', item.id);
				// return '/pages/order/detail?id=' + item.id;
				uni.navigateTo({
					url: '/pages/order/detail'
				})
			},
			payFrontPrice(item) {
				this.sel_order = item;
				this.pay_price = item.front_price;
				this.$refs.popup.open();
				console.log(this.sel_order.code)
			},
			showmo() {
				uni.showModal({
					title: '客服热线电话',
					content: '123353325523',
					success: function(res) {
						console.log('立即拨号')
					}
				})
			},
		}
	}
</script>

<style>
	uni-page-body, uni-page-refresh {
		height: 100%;
		background-color: #eee;
	}
	.active {
		font-weight: bold;
		color: #007AFF;
	}
</style>
